<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">客户\净申购规模变动(亿元)</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="net_purchase_size"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "netAcquisitionSize",
        data(){
            return{
               option:{
                   lastedTime:"",
                   color: ['#68e5f0', '#d99d78', '#4cabce'],
                   tooltip: {
                       trigger: 'axis',
                       axisPointer: {
                           type: 'shadow'
                       }
                   },
                   legend: {
                       textStyle:{
                           color: '#ffffff'//字体颜色
                       },
                       data: ['个人', '机构', '同业']
                   },
                   xAxis: [
                       {
                           type: 'category',
                           axisTick: {show: true},
                           axisLabel: {
                               show: true,
                               textStyle: {
                                   color: '#ffffff'
                               }
                           },
                           data: ['2020-04', '2020-05', '2020-06', '2020-07', '2020-08','2020-09']
                       }
                   ],
                   yAxis: [
                       {
                           type: 'value',
                           axisLine: {show:false},
                           axisTick: {show:false},
                           axisLabel: {
                               show: true,
                               textStyle: {
                                   color: '#ffffff'
                               }
                           }
                       },
                       {
                           type: 'value',
                           axisLine: {show:false},
                           axisTick: {show:false},
                       }
                   ],
                   series: [
                       {
                           name: '个人',
                           type: 'bar',
                           barGap: 0,
                           label: 1,
                           data: [8, 50, 20, 60, -10,90]
                       },
                       {
                           name: '机构',
                           type: 'bar',
                           label: 2,
                           data: [10, 90, 10, 70, -10,120]
                       },
                       {
                           name: '同业',
                           type: 'bar',
                           label: 3,
                           data: [2, 10, 0, -10,-20,-10]
                       },
                   ]
               }
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('net_purchase_size'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 50px;
        top: 1580px;
        width: 600px;
        height: 400px;
    .chartsdom {
        width: 100%;
        height: 100%;
    }
    }
</style>